<!--
@description: 用户申请商户审核
@author: zhangzhan
@time: 2024-09-15 16:06:02
-->
<template>

  <page-container title="商户审核">
    <!-- 表单区域 -->
    <el-form inline>
      <el-form-item label="搜索:">
        <el-input style="width: 240px" placeholder="法人/店铺名称/手机号码" v-model="parameter.key"/>
      </el-form-item>

      <el-form-item label="状态:">
        <el-select @change="onChange" v-model="parameter.status" placeholder="状态" style="width: 240px">
          <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="selectClick">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="text-align:right"></div>

    <!-- -----------------表格---------------- -->
    <el-table :data="filterTableData"
              border size="large"
              row-key="managerId"
              style="width: 100%"
    >
      <el-table-column label="法人" prop="legalPerson" width="120" show-overflow-tooltip/>
      <el-table-column label="店铺名称" prop="storeName" width="120" show-overflow-tooltip/>
      <el-table-column label="手机号码" prop="mobile" width="120" show-overflow-tooltip/>
      <el-table-column label="用户名" prop="userName" width="120" show-overflow-tooltip/>
      <el-table-column label="主营分类名" prop="categoryName" width="120" show-overflow-tooltip/>
      <el-table-column label="小蜜蜂名称" prop="beesName" width="120" show-overflow-tooltip/>
      <el-table-column v-if="parameter.status !== '0'" label="审核人ID" prop="auditor" width="120"
                       show-overflow-tooltip/>
      <el-table-column label="手机号" prop="mobile" width="120" show-overflow-tooltip/>
      <el-table-column label="状态" prop="status" width="120" show-overflow-tooltip>
        <template v-slot="scope">
          <el-button v-if="scope.row.status === '0'" type="warning" plain>待审核</el-button>
          <el-button v-else-if="scope.row.status === '1'" type="success" plain>审核通过</el-button>
          <el-button v-else-if="scope.row.status === '2'" type="danger" plain>审核未通过</el-button>
        </template>
      </el-table-column>
      <el-table-column label="申请说明" prop="explainText" show-overflow-tooltip/>
      <el-table-column label="创建时间" prop="createTime" width="120" show-overflow-tooltip/>
      <el-table-column label="修改时间" prop="updateTime" width="120" show-overflow-tooltip/>


      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button v-if="scope.row.status === '0'" type="primary" plain
                     @click="onSearchById(scope.row)">审核
          </el-button>
          <el-button v-else-if="scope.row.status === '1' || scope.row.status === '2'"
                     type="primary" plain
                     @click="getInfo(scope.row)"
          >查看详情
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination background layout="->,prev, pager, next"
                   :total="paginations.total"
                   @change="tableChange"/>


    <SupplierCheck v-model:model-value="modelValue"
                   v-model:form="form"
                   @searc="onSearch">
    </SupplierCheck>

  </page-container>

</template>
<script setup>

//查询参数
import PageContainer from "@/components/PageContainer.vue";
import {searchAllStatusInfo, searchWaitPass} from "@/api/check/supplier.js";
import {usePagination, useRequest} from "vue-request";
import SupplierCheck from "@/components/check/supplier/SupplierCheck.vue";
import BeesForm from "@/components/sys/bees/BeesForm.vue";
import {ref, computed} from "vue";
import {serverManager} from "@/stores/index.js";

//子组件
// form表单参数
const form = ref({
  supplierInfoId: undefined,
  legalPerson: '',
  storeName: '',
  mobile: '',
  idNumber: '',
  businessUrl: '',
  status: '',
  userName: '',
  categoryName: '',
  explainText: '',
  area: '',
  beesName: '',
  address: '',
  shopFrontUrl: '',
  cardNumber: '',
  reservedNumber: '',
  depositBank: '',
  failNumber: 0,
  latelyFailCause: '',
  auditor: undefined,
  createTime: undefined,
  updateTime: undefined
})

const modelValue = ref(false)


// 表单重置
function reset() {
  (form.value = {
    supplierInfoId: undefined,
    legalPerson: '',
    storeName: '',
    mobile: '',
    idNumber: '',
    businessUrl: '',
    status: '',
    userName: '',
    categoryName: '',
    explainText: '',
    area: '',
    beesName: '',
    address: '',
    shopFrontUrl: '',
    cardNumber: '',
    reservedNumber: '',
    depositBank: '',
    failNumber: 0,
    latelyFailCause: '',
    auditor: undefined,
    createTime: undefined,
    updateTime: undefined
  })
}

const {runAsync: searchById} = useRequest((supplierInfoId) => searchWaitPass(supplierInfoId), {
  manual: true
})


async function onSearchById(row) {
  await searchById(row.supplierInfoId).then((res) => {

    if (res.data.code === 0) {
      form.value = res.data.data
      form.value.userName = row.userName
      form.value.categoryName = row.categoryName
      form.value.beesName = row.beesName
      modelValue.value = true
  
    }
  })
}

//查看详情
function getInfo(row) {
  form.value = row
  modelValue.value = true
}

//==================================================

const parameter = ref({
  page: 1,//当前页码
  limit: 10,//每页记录数
  status: '0',//0待审核1审核通过2审核未通过
  key: ''//检索关键字
})

//分页查询
const {data, total, run: search} = usePagination((d) => searchAllStatusInfo(d), {
  defaultParams: [parameter.value],
  pagination: {
    currentKey: 'page',
    pageSizeKey: 'limit',
    totalKey: 'data.data.page.totalCount',
  }
})

//分页数据计算属性
const paginations = computed(() => {
  return {
    current: parameter.value?.page, //当前页
    pageSize: parameter.value?.limit, //页大小
    total: total.value,
  }
})

//分页事件
function tableChange(currentPage, pageSize) {
  parameter.value.page = currentPage ?? 1
  parameter.value.limit = pageSize ?? 10
  search(parameter.value)
}

//小蜜蜂数据计算属性
const filterTableData = computed(() => {
  return data.value?.data?.data?.page?.list || []
})

function onSearch() {
  search(parameter.value)
}

//查询点击
function selectClick() {
  search(parameter.value)
}

function onChange() {
  search(parameter.value)
}

//0待审核1审核通过2审核未通过
const options = [
  {
    value: '0',
    label: '待审核',
  },
  {
    value: '1',
    label: '审核通过',
  },
  {
    value: '2',
    label: '审核未通过',
  }
]

</script>